<template>
  <span @click.stop="doOpenDialog">
    <slot>
      <div class="dmform-listeditor" :class="{'no-border':noBorder}" v-loading="loading">
        <div v-if="fieldData && fieldData.length>0">
          <div v-if="multiple">
            <div v-for="row1 in fieldData" :key="row1.id">
              <span v-if="row1.children && row1.children.length" class="_group">{{row1.name}}：</span>
              <a-tag v-for="row2 in row1.children" :key="row1.id + '_' + row2.id" color="blue" :visible="true" :closable="false">
                {{ row2.name }}
              </a-tag>
            </div>
          </div>
          <div v-else v-for="(row1) in fieldData" :key="row1.id">
            <a-tag v-for="(row2) in row1.children" :key="row1.id + '_' + row2.id" color="blue" :visible="true" :closable="false">
              {{ row1.name }}：{{ row2.name }}
            </a-tag>
          </div>
        </div>
        <a-button v-if="noBorder" size="small" type="link" icon="form" />
      </div>
    </slot>
  </span>
</template>
<script>
import TreeCascaderDialogJS from './TreeCascaderDialog.js'
export default {
  name: 'TreeCascaderDialog',
  mixins: [TreeCascaderDialogJS]
}
</script>
